<template>
    <div id="dialog">
        <el-card id="order_out_container"  v-for="(order) in order_outPage.data" :key="order.id" shadow="hover"
                  @click="jumpToOrderDetailPage($router,order.id)">
            <div id="store">
                <img src="../assets/cooker.webp" alt="logo" />
                <div id="shop">{{ order.user_name }}</div>
            </div>
            <div id="commodity">
                <img v-for="food in order.foodsInfo" :key="food.picUrl" :src="`${food.picUrl}`"/>
                <span>订单号：{{ order.order_number }}</span>

            </div>
            <div id="food_name">
                <span v-for="food in order.foodsInfo" :key="food.foodName">{{food.foodName}}/</span>
            </div>
            <div id="time-price" class="flex-container">
            <span>下单时间：{{order.order_time}}</span>
              <span class="food-price">￥{{order.totalPrice.toFixed(2)}}</span>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive} from "vue";
const { proxy } = getCurrentInstance();
let order_outPage = reactive(
    {
        "data":[],
    }
)
const queryInfo = () => {
    let path = `${proxy.serCtx}/order/allorders`
    proxy.$axios.get(path).then((res) => {
        order_outPage.data = res.data;
    })
}
function jumpToOrderDetailPage(router, _id) {
    router.push(`/orderDetail/${_id}`)
}
onMounted(()=>{
    queryInfo();
})
</script>

<style scoped>
#dialog {
    margin: 0;
    height: 100vh;
    overflow: auto;
}
#dialog::-webkit-scrollbar {
    width: 8px;
}
#dialog::-webkit-scrollbar-track {
    background: #f1f1f1;
}
#dialog::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
#dialog::-webkit-scrollbar-thumb:hover {
    background: #555;
}
#order_out_container{
    background-color: white;
    /*width: 500px;*/
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

#dialog > div:first-child {
    margin-top: 0;
}
#dialog > div:last-child{
    margin-bottom: 0;
}
#store{
    height: 80px;
    display: flex;
    align-items: center;
    padding: 5px;

}
#store >img{
    height: 80px;
    line-height: 80px;
    /*padding: 10px 10px;*/
    border-radius: 10px;
}
#shop{
    text-decoration: none;
}
#commodity{
    display: flex;
    align-items: center;

}
#commodity > *{
    height: 60px;
    margin: 0 10px;
}
#commodity > img{
    border-radius: 8px;
}
#commodity >span {
    height: auto;
 }
#food_name{
    height: 40px;
    display: flex;
    align-items: center;

}
/*#food_name >span {*/
/*    height: auto;*/
/*}*/
#time-price{
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px lightgray solid;
}
.flex-container {
  display: flex;
  justify-content: space-between;
}
.food-price{
  text-align: right;
  margin-right: 10px;
  margin-bottom: 10px;
  color: #1D815B;
  font-weight: bold;
  font-size: 36px;
}
/*#time >span {*/
/*    height: auto;*/
/*}*/
</style>